<template>
  <el-dialog
      width="70%"
      title="车辆路线监控"
      :visible.sync="showStatus">
    <div v-if="showStatus" id="container" style="width:100%;height:450px;"></div>
  </el-dialog>
</template>
<script>

export default {
  name: "index",
  data() {
    return {
      showStatus: false,
      map: '',
      roadLine: '',
      endCenter: {},
      marks: '',
      locations: []
    }
  },
  mounted() {
  },
  methods: {
    initMap() {
      this.endCenter = this.locations[this.locations.length - 1]
      this.startCenter = this.locations[0]
      this.map = new TMap.Map('container', {
        center: new TMap.LatLng(this.endCenter.lat, this.endCenter.lon),
        zoom: 11,
        viewMode: '2D'
      });
    },
    setRoad() {
      let paths = []
      this.locations.forEach(o => {
        paths.push(new TMap.LatLng(o.lat, o.lon))
      })
      console.log(paths)
      this.roadLine = new TMap.MultiPolyline({
        id: 'polyline-layer',
        map: this.map,
        styles: {
          'style_blue': new TMap.PolylineStyle({
            'color': '#3777FF',
            'width': 6,
            'lineCap': 'butt'
          }),
        },
        geometries: [
          {
            'id': 'pl_1',
            'styleId': 'style_blue',
            'paths': paths
          }
        ]
      });
      let end = new TMap.LatLng(this.endCenter.lat, this.endCenter.lon)
      let start = new TMap.LatLng(this.startCenter.lat, this.startCenter.lon)
      this.marks = new TMap.MultiMarker({
        map: this.map,
        styles: {
          'car': new TMap.MarkerStyle({
            'width': 40,
            'height': 40,
            'anchor': {
              x: 20,
              y: 20,
            },
            'faceTo': 'map',
            'rotate': 180,
            'src': 'https:// scyq.oss-cn-shenzhen.aliyuncs.com/img/static/trunk.png',
          }),
          "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 35,
            "anchor": {x: 16, y: 32},
            "src": "https:// mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
          }),
          "start": new TMap.MarkerStyle({
            "width": 25,
            "height": 35,
            "anchor": {x: 16, y: 32},
            "src": 'https:// mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
          })
        },
        geometries: [{
          "styleId": 'start',
          "position": start,
        },
          {
            id: 'car',
            "styleId": 'car',
            "position": end,
          }
        ]
      });
    },
    show(locations) {
      this.locations = locations
      this.showStatus = true
      this.$nextTick(() => {
        this.initMap()
        this.setRoad()
      })
    },
  }
}
</script>

<style scoped>

</style>
